<template>
	<view>
		<u-navbar :title="$t('issue.navText')" placeholder :autoBack="true" />
		<view class="content">
			<view class="title">
				<image src="/static/image/merchant_11.png"></image>
				<view>{{$t('issue.input_1')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('issue.searchInput_1')" border="none" type="digit" v-model="form.price"></u--input>
			</view>
			<view class="title">
				<image src="/static/image/merchant_12.png"></image>
				<view>{{$t('issue.input_2')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('issue.searchInput_2')" border="none" type="digit" v-model="form.limit"></u--input>
			</view>
			<view class="title">
				<image src="/static/image/merchant_13.png"></image>
				<view>{{$t('issue.input_3')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('issue.searchInput_3')" border="none" type="digit" v-model="form.grant"></u--input>
			</view>
			<view class="title">
				<image src="/static/image/merchant_14.png"></image>
				<view>{{$t('issue.input_4')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('issue.searchInput_4')" border="none" type="text" v-model="form.content"></u--input>
			</view>
			<view class="title">
				<image src="/static/image/merchant_15.png"></image>
				<view>{{$t('issue.time')}}</view>
			</view>
			<view class="grid_3">
				<picker mode="date" @change="timeChange($event,'start')">
					<view class="input" style="margin-bottom: 0rpx;">
						<u--input :placeholder="$t('issue.starTime')" disabled disabledColor="rgba(248, 249, 253, 1)" border="none" type="text" v-model="form.startdate"></u--input>
					</view>
				</picker>
				<view class="to">{{$t('issue.to')}}</view>
				<picker mode="date" @change="timeChange($event,'end')">
					<view class="input" style="margin-bottom: 0rpx;">
						<u--input :placeholder="$t('issue.endTime')" disabled disabledColor="rgba(248, 249, 253, 1)" border="none" type="text" v-model="form.enddate"></u--input>
					</view>
				</picker>
			</view>
			<u-button :text="$t('issue.submitText')" shape="circle" :customStyle="btnStyle" @click="submit"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import graceChecker from '@/mixins/formVerify.js'
	export default {
		data() {
			return {
				form:{
					price:"",//优惠金额
					limit:"",//限定金额
					grant:"",//发行数量
					content:"",//规则备注
					startdate:"",//开始时间
					enddate:"",//结束时间
				},
				btnStyle:{
					background:"rgba(255, 193, 2, 1)",
					color:"#fff",
					border:"none",
					height:"50px",
					width:"90%",
					margin:"60px auto 0px"
				},
				rule:{
					price:{
						type: String,
						required: true,
						message: "请输入优惠金额"
					},
					limit:{
						type: String,
						required: true,
						message: "请输入限定金额"
					},
					grant:{
						type: String,
						required: true,
						message: "请输入发行数量"
					},
					content:{
						type: String,
						required: true,
						message: "请输入规则备注"
					},
					startdate: {
						type: String,
						required: true,
						message: "请选择开始日期"
					},
					enddate: {
						type: String,
						required: true,
						message: "请选择结束日期"
					},
				}
			};
		},
		methods:{
			timeChange(event,type){
				type=='start'?this.form.startdate=event.detail.value:this.form.enddate=event.detail.value
			},
			submit(){
				let transit = graceChecker.RuleValidation(this.form, this.rule)
				if(transit){
					uni.showLoading({
						title: "添加中...",
						mask:true
					})
					this.$http.post('wanlshop/coupon/issueCoupons', this.form).then(res => {
						uni.hideLoading()
						if (res.code == 1) {  
							setTimeout(() => {
								this.$refs.uToast.show({
									type: 'default',
									message: "添加成功",
									duration: 1000,
									complete() {
										uni.navigateBack()
									}
								})
							}, 150)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 24rpx;

		.title {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			color: #000;
			font-size: 32rpx;
			font-weight: bold;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}

		.input {
			background: rgba(248, 249, 253, 1);
			border-radius: 10rpx;
			padding: 26rpx 28rpx;
			margin-bottom: 28rpx;
		}
		.grid_3{
			display: grid;
			grid-template-columns: auto 30px auto;
			grid-column-gap: 20rpx;
			align-items: center;
			.to{
				text-align: center;
				font-size: 30rpx;
			}
		}
	}
</style>
